<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CRM后台管理系统</title>
</head>
<body>
<div id="app">
    <h1>客户信息列表</h1>
    <p>
        <el-row>
            <el-button type="primary">查询</el-button>
            <!--            <el-button type="success" @click="insert">新增</el-button>-->
            <el-button type="success" @click="dialogVisible = true">新增</el-button>
            <el-button type="warning" @click="updateVisible = true">修改</el-button>
            <el-button type="danger" @click="deleteCust">删除</el-button>
        </el-row>
    </p>

    <!--搜索查询模块-->
    <el-row :gutter="20">
        <el-col :span="6">


            <el-autocomplete
                    popper-class="my-autocomplete"
                    v-model="searchCustomerId"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入内容"
                    @select="handleSelect">
                <template slot-scope="{ item }">
                    <div class="name">{{ item.customerId }}</div>
                </template>
                <template slot="prepend">客户编号：</template>
            </el-autocomplete>

        </el-col>
        <el-col :span="6">

            <el-autocomplete
                    popper-class="my-autocomplete"
                    v-model="searchCustomerName"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入内容"
                    @select="handleSelect">
                <template slot-scope="{ item }">
                    <div class="name">{{ item.customerName }}</div>
                </template>
                <template slot="prepend">客户名称：</template>
            </el-autocomplete>
            <!--            <div class="grid-content bg-purple">-->
            <!--                <el-autocomplete class="inline-input" v-model="searchCustomerName" :fetch-suggestions="querySearch"-->
            <!--                                 placeholder="请输入内容" @select="handleSelect">-->
            <!--                    <template slot="prepend">客户名称：</template>-->
            <!--                </el-autocomplete>-->

            <!--            </div>-->
        </el-col>
    </el-row>
    <br>
    <el-row :gutter="20">
        <el-col :span="100">
            <div class="grid-content bg-purple">
                <span class="demonstration">客户信息来源</span>
                <template>
                    <el-select v-model="value" placeholder="请选择">
                        <el-option v-for="item in options" :key="item.value" :label="item.label"
                                   :value="item.value">
                        </el-option>
                    </el-select>
                </template>
            </div>
        </el-col>
        <el-col :span="16">
            <div class="grid-content bg-purple">
                <div class="block">
                    <span class="demonstration">创建日期：</span>
                    <el-date-picker v-model="value2" type="datetimerange" :picker-options="pickerOptions"
                                    range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
                    </el-date-picker>
                </div>
            </div>
        </el-col>
    </el-row>

    <!--新增界面开始  -->
    <el-dialog title="新增客户信息" :visible.sync="dialogVisible" width="450px">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
            <el-form-item label="客户名称" prop="insertCustomername">
                <el-input v-model="ruleForm.insertCustomername"></el-input>
            </el-form-item>
            <!--insertCustSource客户信息来源-->
            <el-form-item label="客户信息来源" prop="insertCustSource">
                <el-select v-model="ruleForm.insertCustSourceValue" placeholder="请选择客户信息来源">
                    <el-option v-for="item in ruleForm.insertCustSource" :key="item.value" :label="item.label"
                               :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <!--insertCustIndustry客户所属行业-->
            <el-form-item label="客户所属行业" prop="insertCustIndustry">
                <el-select v-model="ruleForm.insertCustIndustryValue" placeholder="请选择客户所属行业">
                    <el-option v-for="item in ruleForm.insertCustIndustry" :key="item.value" :label="item.label"
                               :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="固定电话" prop="insertCustPhone">
                <el-input v-model="ruleForm.insertCustPhone"></el-input>
            </el-form-item>
            <el-form-item label="移动电话" prop="insertCustMobile">
                <el-input v-model="ruleForm.insertCustMobile"></el-input>
            </el-form-item>
            <el-form-item label="客户住址" prop="insertCustAddress">
                <el-input v-model="ruleForm.insertCustAddress"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addCustomer()">保存</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <!-- 新增界面结束 -->

    <!--修改界面开始  -->
    <el-dialog title="修改客户信息" :visible.sync="updateVisible" width="450px">
        <el-form :model="updateCust" :rules="rules" ref="updateCust" label-width="120px" class="demo-ruleForm">

            <!--客户编号禁用修改-->
            <el-form-item label="客户编号"  >
                <el-input v-model="updateCust.updateCustId" :disabled="true"></el-input>
            </el-form-item>

            <el-form-item label="客户名称" prop="insertCustomername">
                <el-input v-model="updateCust.updateCustomername"></el-input>
            </el-form-item>
            <!--insertCustSource客户信息来源-->
            <el-form-item label="客户信息来源" >
                <el-select v-model="updateCust.updateCustSourceValue" placeholder="请选择客户信息来源">
                    <el-option v-for="item in updateCust.updateCustSource" :key="item.value" :label="item.label"
                               :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <!--insertCustIndustry客户所属行业-->
            <el-form-item label="客户所属行业" >
                <el-select v-model="updateCust.updateCustIndustryValue" placeholder="请选择客户所属行业">
                    <el-option v-for="item in updateCust.updateCustIndustry" :key="item.value" :label="item.label"
                               :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="固定电话" prop="insertCustPhone">
                <el-input v-model="updateCust.updateCustPhone"></el-input>
            </el-form-item>
            <el-form-item label="移动电话" prop="insertCustMobile">
                <el-input v-model="updateCust.updateCustMobile"></el-input>
            </el-form-item>
            <el-form-item label="客户住址" prop="insertCustAddress">
                <el-input v-model="updateCust.updateCustAddress"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="updateCustomer()">修改</el-button>
                <el-button @click="updateVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <!-- 修改界面结束 -->


    <!--表格-->
    <template>
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                  @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>
            </el-table-column>
            <el-table-column prop="customerId" label="客户编号" width="120">
            </el-table-column>
            <el-table-column prop="customerName" label="客户名称" width="120">
            </el-table-column>
            <el-table-column prop="custUserId" label="客户负责人" width="120">
            </el-table-column>
            <el-table-column prop="custSource" label="客户信息来源" width="120">
            </el-table-column>
            <el-table-column prop="custIndustry" label="客户所属行业" width="120">
            </el-table-column>
            <el-table-column prop="custCreatedDate" label="创建日期" show-overflow-tooltip>
            </el-table-column>
        </el-table>
        <div style="margin-top: 20px">
            <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
            <el-button @click="toggleSelection()">取消选择</el-button>
        </div>
    </template>


    <div class="block">
        <span class="demonstration">共有条{{tableData.length}}数据，共x页，当前为x页</span>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page.sync="currentPage2" :page-sizes="[10, 20, 30, 40]" :page-size="100"
                       layout="sizes, prev, pager, next" :total="1000">
        </el-pagination>
    </div>

</div>
</body>
<!--引入vue.js axios请求库-->
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script src="js/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="css/index.css">
</html>
